<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据代理Object.defineProperty()方法 </title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <script>
        //数据代理
        //Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
        // Object.defineProperty(obj, prop, descriptor)
        //obj ：要定义属性的对象
        //prop要定义或修改的属性的名称
        //descriptor 要定义或修改的属性描述符
        let number = 18
        let person = {
            name: "周杰伦",
            sex: '男',
        }


        // Object.defineProperty()定义的属性不能枚举，需要能枚举x需要设置 enumerable: true
        //Object.defineProperty()定义的属性不能修改。需要修改则可配置:writable: true
        //Object.defineProperty()定义的属性不能删除 ，需要删除配置 configurable: true 
        Object.defineProperty(person, 'age', {

            configurable: true, //控制属性是否可以被删除，默认值为falseconfigurable: true //控制属性是否可以被删除，默认值为false

            // enumerable: true, //控制属性是否可以枚举，默认是为false
            //writable: true, //控制属性是否可以被修改 ，默认值是false
            // configurable: true //控制属性是否可以被删除，默认值为false

            //当有人读取person的age属性时get get函数（getter）就会被调用，且返回值就是age的值
            get() {
                return number
            },

            // //当有人修改person的age属性时get set函数（setter）就会被调用，且返回值就是age的值
            set(value) {
                number = value
            }




        })

        //枚举后age为48在控制台不显示，可以配置 enumerable: true则就可以枚举了
        // for (let n in person) {
        //     console.log("属性名:" + n)
        //     console.log("属性值" + person[n])
        // }












        //   console.log(person)
    </script>











</body>

</html>